import React, { Component } from 'react';
import './style.scss';

class WshTable extends Component {
  eachRow = (col) => {
    return (
      this.props.columns.map((item) => {
        if (item.dataIndex !== undefined) {
          if (col[item.dataIndex] !== undefined) {
            return (
              <td>{col[item.dataIndex]}</td>
            );
          }
        }
        return (
          <td>空</td>
        );
      })
    );
  }

  render() {
    const { columns, dataSource } = this.props;
    return (
      <>
        <div className="wsh-table-wrapper">
          <div className="wsh-table-body">
            <table>
              <thead className="wsh-table-thead">
                <tr>
                  {
                    columns.map((item) => {
                      return (
                        <th key={item.key}>
                          <span>{item.title}</span>
                        </th>
                      );
                    })
                  }
                </tr>
              </thead>
              <tbody>
                {
                  dataSource.map((item) => {
                    return (
                      <tr key={item.key}>
                        {this.eachRow(item)}
                      </tr>
                    );
                  })
                }
              </tbody>
            </table>
          </div>
        </div>
      </>
    );
  }
}

export default WshTable;
